<template>
  <div>
    <el-dialog
      :title="AddDailyForm.title"
      :visible.sync="AddDailyForm.isShow"
      top="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="提交时间" prop="date">
          <el-input :placeholder="AddDailyForm.time" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="报表内容" prop="briefSummary">
          <el-input
            type="textarea"
            rows="5"
            v-model="ruleForm.briefSummary"
          ></el-input>
        </el-form-item>

        <el-form-item v-if="AddDailyForm.isLeave" label="是否请假">
          <el-switch v-model="ruleForm.leave"></el-switch>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addSummary, updateDaily} from "@/api/request";

export default {
  name: "addDailyForm",
  watch: {
    AddDailyForm: {
      handler() {
        this.ruleForm.year = parseInt(this.AddDailyForm.time.split("-")[0]);
        this.ruleForm.month = parseInt(this.AddDailyForm.time.split("-")[1]);
        this.ruleForm.day = parseInt(this.AddDailyForm.time.split("-")[2]);
        this.ruleForm.briefSummary = this.AddDailyForm.dailyContent;
        this.type = this.AddDailyForm.type;
        this.id = this.AddDailyForm.id;
        this.isShow = this.AddDailyForm.isShow;
      },
      deep: true
    }
  },
  data() {
    return {
      // 表单信息
      ruleForm: {
        id: "",
        // 报表添加日期
        year: "",
        month: "",
        day: "",
        // 是否请假
        state: 1,
        // 区分日报和月报 1为日报 2 为月报
        type: 1,
        // 报表内容
        briefSummary: "",
        // 添加报表人姓名
        username: this.$store.state.user.nickname
      },
      isShow: false,
      // 创建报表时间
      createTime: new Date().toLocaleString().replaceAll("/", "-"),
      // 控制表单的出现和隐藏
      dialogVisible: false,
      // 表单的约束
      rules: {
        briefSummary: [
          {required: true, message: "请填写报表内容", trigger: "blur"}
        ]
      }
    };
  },
  props: ["AddDailyForm", "refresh"],
  methods: {
    // 关闭表单
    handleClose(done) {
      done();
      // 清楚表单内容
      this.clearForm();
      //清除验证
      this.$refs["ruleForm"].clearValidate();
    },
    // 提交表单
    submitForm(formName) {
      if (this.AddDailyForm.isDisable == true) {
        this.AddDailyForm.isShow = false;
        return false;
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.AddDailyForm.dailyContent !== this.ruleForm.briefSummary){
            if (this.AddDailyForm.dailyContent === "") {
              addSummary(this.ruleForm).then(() => {
                // addSummary(this.ruleForm).then((res) => {
                // 回馈提交信息
                this.$message({
                  message: "提交成功！",
                  type: "success"
                });
                // 隐藏表单
                this.AddDailyForm.isShow = false;

                this.refresh();
                // 提交后清楚表单信息并关闭表单
                this.clearForm();
              });
            } else {
              updateDaily({
                id: this.AddDailyForm.id,
                day: this.ruleForm.day,
                month: this.ruleForm.month,
                year: this.ruleForm.year,
                username: this.ruleForm.username,
                briefSummary: this.ruleForm.briefSummary
              }).then(() => {
                this.$message({
                  message: "修改成功！",
                  type: "success"
                });
                this.AddDailyForm.isShow = false;
                // 提交后清楚表单信息并关闭表单
                this.clearForm();
              });
            }
          }else{
            this.AddDailyForm.isShow = false;
          }
        } else {
          return false;
        }
      });
    },
    // 清除表单内容
    clearForm() {
      this.ruleForm.briefSummary = "";
    }
  }
};
</script>

<style>
.el-dialog{
  width: 70%;
}
</style>
